<template>
  <div class="tip-content">
    {{tips.title}}
    <el-tooltip style="display:inline-block" placement="bottom">
      <template slot="content">
        <p style="max-width:300px;">{{tips.content}}</p>
      </template>
      <div style="cursor:pointer;">{{tips.ind}}</div>
    </el-tooltip>
    {{tips.sel?tips.sel:""}}
  </div>
</template>

<script>
export default {
  props: {
    tips: {
      type: Object,
      default: ()=>({})
    }
  },
  data() {
    return {
      tipShow: false,
    }
  },
  methods: {
    mouseEnter() {
      this.tipShow = true;
    },
    mouseLeave() {
      this.tipShow = false;
      console.log("000");
    }
  }
}
</script>
<style>
/* 以下是将tooltip的提示框改为白底无框的样式 */
  .el-tooltip__popper {
    background: #fff !important;
    color: #303133 !important;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: 1px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
  }
  .el-tooltip__popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: #fff!important;
  }
  .el-tooltip__popper[x-placement^=bottom] .popper__arrow{
    border-bottom-color: #fff !important;
  }
</style>